<template>
    <!--<h1>备件计划</h1>-->
    <div id="purchase">
       <!-- <h3>查询条件：</h3>  legalPersonLists-->
        <el-form ref="form" :model="purchaseForm" :inline="true" style="margin-bottom:10px;border-bottom:1px solid #ccc;">
            <el-form-item label="法人名称" class="selectMB10 label-w1" >
                <el-select size="mini" v-if="legalPersonLists.length> 1" clearable v-model="purchaseForm.legalPersonName"  @change="selectLegalPersonName" placeholder="请选择">
                    <el-option v-for="(legalPerson,index) in legalPersonLists" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.legalPersonName">
                    </el-option>
                </el-select>
                <el-input size="mini" disabled v-else v-model="purchaseForm.legalPersonName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="计划编号" class="purchase_label selectMB10 label-w1" >
                <el-input v-model="purchaseForm.planCode" placeholder="输入计划编号"  size="mini"></el-input>
            </el-form-item>
            <el-form-item label="制定时间" class="purchase_label selectMB10 label-w1" >
                <el-date-picker type="date" size="mini" :editable="false" v-model="purchaseForm.createTimeBegin"  placeholder="选择开始日期"></el-date-picker>
                &nbsp;至&nbsp;
                <el-date-picker type="date" size="mini" :editable="false" v-model="purchaseForm.createTimeEnd"  placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="制定人" class="purchase_label selectMB10 label-w1" >
                <el-input v-model="purchaseForm.creatorName" placeholder="输入计划制定人itCode" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="计划状态" class="purchase_label selectMB10 label-w1" >
                <el-select v-model="purchaseForm.status" placeholder="请选择" size="mini" clearable>
                    <el-option v-for="(planStatus,index) in planStatusLists" :key="index" :label="planStatus.label" :value="planStatus.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计划来源" class="purchase_label selectMB10 label-w1" >
                <el-select v-model="purchaseForm.source" placeholder="请选择" size="mini" clearable>
                    <el-option v-for="(planSources,index) in planSourcesLists" :key="index" :label="planSources.label" :value="planSources.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-checkbox v-model="purchaseForm.aggregationStatus" style="margin-top: 5px;">包括已汇总的计划</el-checkbox>
            <el-form-item class="purchase_label selectMB10">
                <el-button type="danger" size="mini" class="searchBtn bolder outsideBtnBS selectAll" :disabled="selectDisabled" @click="query(pageIndex,pageSize)">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="block" style="margin-bottom: 10px">
            <span class="demonstration" style="font-weight: bold;">采购计划列表：</span>
            <span class="wrapper">
                <el-button type="danger" size="mini" class="bolder searchBtn routerML30" v-if="powerFlag1" @click="createNew">
                    <!--<router-link to="/CreatePlan">新增</router-link>-->
                    新增
                </el-button>
               <el-button type="danger" size="mini" class="bolder searchBtn routerML30" @click="importFile" >导入</el-button>
            </span>
        </div>

       <!-- <el-form ref="form" :model="form" :inline="true">
            <el-form-item class="purchase_label" label="采购计划列表">
                <router-link to="/CreatePlan" class="routerML30">
                    <el-button type="danger" size="mini" class="bolder searchBtn">新增</el-button>
                </router-link>
                <el-button type="danger" size="mini" class="bolder searchBtn routerML30" @click="importFile" >导入</el-button>
            </el-form-item>
        </el-form>-->

        <!--表格-->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column  type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
            <el-table-column  label="操作" width="240" header-align="center" align="center">
                <template scope="scope">
                    <!-- 
                    <router-link :to="{ path: 'ChangePlan', query: { planCode: scope.row.planCode}}"></router-link>-->
                    <div class="operationItem bolder" v-if="scope.row.status==1 && powerFlag1" @click="handleUpdate(scope.$index,scope.row)">修改</div>
                    <div class="operationItem bolder disabled" v-else-if="scope.row.status!=1 && powerFlag1">修改</div>

                    <div class="operationItem bolder" v-if="scope.row.status==2 && powerFlag2" @click="handleExamine(scope.$index,scope.row)">审核</div>
                    <div class="operationItem bolder disabled" v-else-if="scope.row.status!=2 && powerFlag2">审核</div>

                    <div class="operationItem bolder" v-if="scope.row.status==3 && powerFlag3" @click="handleApproval(scope.$index,scope.row)">审批</div>
                    <div class="operationItem bolder disabled" v-else-if="scope.row.status!=3 && powerFlag3">审批</div>

                    <router-link :to="{ path: 'CheckPlan', query: { planId: scope.row.planId}}">
                        <div class="operationItem bolder">查看</div>
                    </router-link>
                    <!-- 
                    <el-button type="danger" size="mini" class="bolder">执行情况</el-button>
                    -->
                </template>
            </el-table-column>
            <el-table-column prop="sourceWord" label="来源"  width="100" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="planCode" label="计划编号"  header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-button size="mini" @click="checkTheDetails(scope.$index, scope.row)" class="blueFont">{{scope.row.planCode}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="totalCount" label="总件数"  width="60" header-align="center"> </el-table-column>
            <el-table-column prop="currencyCodeWord" label="币别"  width="60" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="total" label="总金额"  header-align="center" align="right"> </el-table-column>
            <el-table-column prop="statusWord" label="状态" width="80" header-align="center" align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="creatorName" label="制定人"  header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="createTime" label="制定时间" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="reviewerName" label="审核人" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="reviewTime" label="审核时间" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="approverName" label="审批人" header-align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="approvalTime" label="审批时间"  header-align="center" show-overflow-tooltip> </el-table-column>
        </el-table>
         <!--分页-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage3" :current-page="pageIndex"
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="totalPage" :total="totalNumber"></el-pagination>

         <!-- 点击每行的计划编码查看明细 明细弹窗 -->
        <el-dialog title="计划明细" :visible.sync="checkTheDetailsVisible" size="large" :lock-scroll="false">
            <el-form ref="form" :model="detailForm" :inline="true">
                <el-form-item label="备件编码" class="purchase_label">
                    <el-input v-model="detailForm.materialCode"  placeholder="输入备件编号"  size="mini"></el-input>
                </el-form-item>
                <el-form-item label="备件分类" class="purchase_label">
                    <el-select v-model="detailForm.materialSubclass" placeholder="请选择" size="mini" clearable>
                        <el-option v-for="(materialSubclass,index) in materialSubclassLists" :key="index" :label="materialSubclass" :value="materialSubclass">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="planDetailsSearch(detailPageIndex,detailPageSize)">查询</el-button>
                </el-form-item>
                <!-- 
                <el-form-item class="purchase_label jumpBtn">
                    <el-button type="primary" size="small" icon="minus" class="searchBtn" style="padding: 3px 6px;" ></el-button>
                    <router-link to="/PlanDetail">
                        <el-button type="primary" size="small" icon="share" class="searchBtn" style="padding: 3px 6px"></el-button>
                    </router-link>
                </el-form-item>
                -->
            </el-form>
            <el-table :data="detailsData" border style="width: 100%">
                <el-table-column property="index" label="序" header-align="center" align="center"   width="40"></el-table-column>
                <el-table-column property="materialSubclass" label="分类"  width="60" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="materialCode" label="备件编码"  header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="materialName" label="备件名称"  header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="standard" label="规格"  width="60" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="单位"  width="60" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="quantity" label="计划数量"  width="80" header-align="center"> </el-table-column>
                <el-table-column property="currencyCodeWord" label="币别"  width="60" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="price" label="单价"  header-align="center" align="right" width="60"> </el-table-column>
                <el-table-column property="amount" label="金额"  width="80" header-align="center" align="right"> </el-table-column>
                <el-table-column property="deliveryTimeExpectation" label="期望到货时间"  header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="remark" label="备注"  header-align="center" show-overflow-tooltip> </el-table-column>
            </el-table>
        </el-dialog>

        <!--导入弹框-->
        <el-dialog title="导入采购计划明细" id="importFile" :visible.sync="importFileVisible" size="tiny" :lock-scroll="false">
            <el-upload class="upload-demo"  :action="action" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                <el-button size="mini" type="danger">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
            </el-upload>
        </el-dialog>
   
    </div>
</template>

<script>
    export default {
        data(){
            return{
                legalPersonLists:[],   //法人名称下拉列表中的值
                planStatusLists:[],   //计划状态下拉列表中的值
                planSourcesLists:[],   //计划来源下拉列表中的值
                purchaseForm:{
                    legalPersonName:'',
                    legalPersonId:'',
                    planCode:'',
                    createTimeBegin:'',
                    createTimeEnd:'',
                    creatorName:'',
                    status:'',
                    source:'',     // PURCHEASE 默认采购计划
                    aggregationStatus:''
                },
                pageIndex: 1,    //当前页（必传）
                pageSize: 10,   //每页多少条
                currentPage3:3,
                totalNumber: 20,
                totalPage: 2,
                checkTheDetailsVisible:false,    // 点击每行的计划编码查看明细
                detailForm:{
                    materialCode:'',
                    materialSubclass:''
                },
                planCode:'',
                planId:'',
                detailsData:[],
                materialSubclassLists:[],    //计划明细 查询条件 备件分类下拉列表
                detailPageIndex:1,   // 计划明细当前页数
                detailPageSize:10,   // 计划明细当前页显示的条数
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                action:"",
                fileList: [],
                importFileVisible:false,
                tableData:[],
                //权限
                powerFlag1:false,
                powerFlag2:false,
                powerFlag3:false,
                //查询禁用
                selectDisabled:false
            }
        },
        computed:{
            powerData(){
                return this.$store.state.powerData;
            }
        },
        watch:{
            powerData(){
                var _this=this;
                for(var i=0;i<_this.powerData.length;i++){
                    if(_this.powerData[i]=="ROLE_security_materialPlan_modify"){
                        //备件计划新增、修改、保存、提交及导入权限
                        _this.powerFlag1=true;
                    }
                    if(_this.powerData[i]=="ROLE_security_materialPlan_review"){
                        //备件计划审核权限
                        _this.powerFlag2=true;
                    }
                    if(_this.powerData[i]=="ROLE_security_materialPlan_approve"){
                        //备件计划审批权限
                        _this.powerFlag3=true;
                    }
                }
            }
        },
        mounted:function(){
            var _this=this;
            this.$store.commit('currentActive', 'SparePlan');
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            // 获取当前系统的时间
            var myDate=new Date();
            _this.purchaseForm.createTimeEnd=myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
            _this.purchaseForm.createTimeBegin=myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+(myDate.getDate()-7);
            _this.legalPersonDropDownValue();  // 查询条件 法人名称 下拉列表的值 
            _this.planConditionDropDownValue();   // 查询条件  计划状态、计划来源 下拉列表的值
            _this.query(_this.pageIndex,_this.pageSize);    // 按计划汇总   查询

            // 上传地址
            _this.action=_this.procurement_service+"plan/upload";

            //判断权限
            for(var i=0;i<_this.powerData.length;i++){
                if(_this.powerData[i]=="ROLE_security_materialPlan_modify"){
                    //备件计划新增、修改、保存、提交及导入权限
                    _this.powerFlag1=true;
                }
                if(_this.powerData[i]=="ROLE_security_materialPlan_review"){
                    //备件计划审核权限
                    _this.powerFlag2=true;
                }
                if(_this.powerData[i]=="ROLE_security_materialPlan_approve"){
                    //备件计划审批权限
                    _this.powerFlag3=true;
                }
            }

        },
        methods:{
            //新增
            createNew(){
                var _this=this;
                _this.$router.push({path:"/CreatePlan"});
            },
            // 查询条件 法人名称 下拉列表的值
            legalPersonDropDownValue(){  //法人名称下拉列表值
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonLists = data.data;
                            if(_this.legalPersonLists.length == 1){
                                _this.purchaseForm.legalPersonId =_this.legalPersonLists[0].id;
                                _this.purchaseForm.legalPersonName =_this.legalPersonLists[0].legalPersonName
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 下拉列表选择法人名称
            selectLegalPersonName(){
                var _this=this;
                for(var i=0;i<_this.legalPersonLists.length;i++){
                    if(_this.purchaseForm.legalPersonName==_this.legalPersonLists[i].legalPersonName){
                        _this.purchaseForm.legalPersonId=_this.legalPersonLists[i].id;
                    }
                }
            },
            //  计划状态、计划来源 下拉列表
            planConditionDropDownValue(){
                var _this=this;
                var tmp = ["planStatus","source"];
                $.ajax({
                    type:'POST',
                    url:_this.procurement_service+'procurement/getPullDownList',
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success:function(data){
                        if(data.success){
                            // console.log(data.data);
                            _this.planStatusLists = data.data.planStatus;    //计划状态
                            _this.planSourcesLists=data.data.source;    // 计划来源
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 查询按钮
            query(pageIndex,pageSize){
                var _this=this;
                _this.loading=true;

                if (_this.purchaseForm.legalPersonName == null || _this.purchaseForm.legalPersonName == "") {
                    _this.purchaseForm.legalPersonId = "";
                }

                var tmp={legalPersonId:_this.purchaseForm.legalPersonId,planCode:_this.purchaseForm.planCode,createTimeBegin:_this.purchaseForm.createTimeBegin,createTimeEnd:_this.purchaseForm.createTimeEnd,creatorName:_this.purchaseForm.creatorName,status:_this.purchaseForm.status,aggregationStatus:_this.purchaseForm.aggregationStatus,pageIndex:pageIndex,pageSize:pageSize};
                // 如果计划来源有值，添加这个参数
                if(_this.purchaseForm.source){
                    tmp.source=_this.purchaseForm.source;
                }
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"plan/queryPlan",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            // console.log(data.data);
                            var arr=data.data.dataList;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].total=arr[i].total.toFixed(2);
                            }
                            _this.tableData=arr;
                            _this.totalNumber=data.data.totalNumber;    //总条数
                            _this.totalPage=data.totalPage;    //总页数 
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }                             
                        _this.selectDisabled=false; 
                    }
                });
            },
            //   分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                var _this = this;
                _this.pageSize=val;
                _this.query(_this.pageIndex, _this.pageSize);
            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                var _this = this;
                _this.pageIndex=val;
                _this.query(_this.pageIndex, _this.pageSize);
            },
            // 点击每行的计划编码查看明细
            checkTheDetails(index,row){
                var _this=this;
                _this.checkTheDetailsVisible=true;
                _this.planId=row.planId;
                $.ajax({
                    type: 'GET',
                    url: _this.procurement_service+"plan/viewPlan?planId="+_this.planId,
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            var arr=data.data.planItems;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].price=arr[i].price.toFixed(2);
                                arr[i].amount=arr[i].amount.toFixed(2);
                            }
                            _this.detailsData=arr;
                            _this.selectMaterialSubclassDropDownValue();  // 计划明细弹窗 备件分类下拉列表的值
                        }else
                            // console.log(data.errorMessage);                             
                            _this.common.errorTip(data.errorMessage);
                    }
                });

            },
            // 计划明细弹窗 查询条件 备件分类下拉列表
            selectMaterialSubclassDropDownValue(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"plan/selectMaterialSubclass?planId="+_this.planId,
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.materialSubclassLists = data.data;
                            console.log(_this.materialSubclassLists);
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 计划明细弹窗  计划明细 查询
            planDetailsSearch(pageIndex,pageSize){
                var _this=this;
                var tmp={planId:_this.planId,materialCode:_this.detailForm.materialCode, materialSubclass:_this.detailForm.materialSubclass,pageIndex:pageIndex,pageSize:pageSize};
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"plan/queryPlanItem",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            console.log(data.data);
                        }else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            }, 
            //导入按钮
            importFile(){
                var _this=this;
                _this.importFileVisible = true;
                _this.fileList=[];

            },
             //上传文件之前的钩子
            beforeAvatarUpload(file) {
                // console.log(file);
                const isExcel2007 = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isExcel2003 = file.type === 'application/vnd.ms-excel';
                if (!isExcel2007 && !isExcel2003) {
                    this.$message.error('只能上传excel文件!');
                }
                return isExcel2007 || isExcel2003 ;
            },
            // 文件上传成功时的钩子
             handleAvatarSuccess(res, file) {
                 var _this=this;
                if(res.success){
                    _this.common.successTip("上传成功！");
                    _this.importFileVisible = false;
                    //上传成功刷新页面
                    _this.query(_this.pageIndex,_this.pageSize);    // 按计划汇总   查询
                }else{
                    _this.fileList=[];
                    _this.common.errorTip(res.errorMessage);
                }
                // console.log(res);
                // console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
             // 修改按钮
            handleUpdate(index,row){
                var _this=this;
                _this.$router.push({path:"/ChangePlan",query:{planId:row.planId, status:row.status}});
            },
             // 审核按钮
            handleExamine(index,row){
                var _this=this;
                _this.$router.push({path:"/CheckPlan",query:{planId:row.planId, status:row.status}});
            },
            // 审批按钮
            handleApproval(index,row){
                var _this=this;
                _this.$router.push({path:"/CheckPlan",query:{planId:row.planId, status:row.status}});
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }
        }
    }
</script>


<style>
    .el-form-item__content{
        display: inherit;
    }
    .searchBtn{
        box-shadow: 1px 1px 3px #000;
    }
    .jumpBtn{
        float: right;
    }
    .routerMR10{
        margin-right: 10px;
    }
    .routerML30{
        margin-left: 30px;
    }
</style>